<template>
  <a-drawer
    title="编辑院系专业招生计划"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="professionalEditVisiable"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-row :gutter="48">
        <a-col :sm="{span:12}"  :md="{span:12}">
            <a-form-item label='院系' >
              <a-select :allowClear="true" showSearch optionFilterProp="children" @change="yxChange" disabled v-decorator="['zsyxm',{initialValue:postParams.zsyxm}]">
                    <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh+"-"+ i.dwmc }}</a-select-option>
                  </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}"  :md="{span:12}">
            <a-form-item label='招生年度' >
            <a-select :allowClear="true"  showSearch optionFilterProp="children" disabled v-decorator="['zsnj',{initialValue:postParams.zsnj}]">
                <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
              </a-select>
      </a-form-item>
        </a-col>
        <a-col :sm="{span:12}"  :md="{span:12}">
            <a-form-item label='专业' >
            <a-select :allowClear="true"  showSearch optionFilterProp="children"  disabled v-decorator="['zszym',{initialValue:postParams.zszym}]" @change="zyChange">
                  <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{i.zyh+'-'+ i.zymc }}</a-select-option>
                </a-select>
      </a-form-item>
        </a-col>
        <a-col :sm="{span:12}"  :md="{span:12}">
           <a-form-item label='学习形式'>
           	<a-select :allowClear="true" showSearch optionFilterProp="children" v-decorator="['qrzhfqrz',{initialValue:postParams.qrzhfqrz}]">
           		<a-select-option v-for="i in selectMenu.xxlx" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
           	</a-select>
           </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='培养模式'>
            <a-select showSearch optionFilterProp="children" v-decorator="['pymsm',{initialValue:postParams.pymsm}]" disabled>
              <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.pymsm">{{ i.pymsmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :md="{span:12}">
          <a-form-item label='本专业计划数'>
            <a-input  v-decorator="['zszjhrs',{initialValue:postParams.zszjhrs}]" />
          </a-form-item>
        </a-col>
      </a-row>
      <!--<a-table-->
        <!--ref="table"-->
        <!--size="default"-->
        <!--rowKey="key"-->
        <!--bordered-->
        <!--:columns="columns"-->
        <!--:dataSource="data"-->
        <!--:pagination="false"-->
        <!--&gt;-->
        <!--<template slot="plan" slot-scope="text, record">-->
            <!--<a-input-->
            <!--style="margin: -5px 0"-->
            <!--:value="text.plan"-->
            <!--@change="e => handleChange(record.key,'plan',e.target.value)"-->
            <!--/>-->
        <!--</template>-->
        <!--</a-table>-->
        <a-form-item label='备注' style="margin-top:20px">
                   <a-textarea placeholder="请输入..." v-decorator="['note',{initialValue:postParams.note}]"/>
      </a-form-item>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button style="margin-right: .8rem" @click="onClose">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
// import moment from 'moment'
import { STable } from '~'
import { mapState } from 'vuex'

const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 18 }
}

const selectArr = ['TYPE0126', 'TYPE0075', 'TYPE0125', 'TYPE0072']
export default {
  name: 'ProfessionalEdit',
  props: {
    info: {
      default: () => ({
        hzfs: '',
        zjh: '',
        fzyxwjh: '',
        zyxwjh: ''
      })
    },
    professionalEditVisiable: {
      default: false
    }
  },
  components: {
    STable
  },
  data () {
    return {
      formItemLayout,
      loading: false,
      data: [],
      postParams: {
        hzfs: 'yx'
      },
      // 表头
      columns: [
        {
          title: '',
          dataIndex: 'column'
        },
        {
          title: '计划',
          scopedSlots: { customRender: 'plan' }
        }
      ],
      selectMenu: {
        yx: [], // 院系
				xxlx:[],
				zy:[]
      }
    }
  },
  beforeCreate() {
  	this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      TYPE0126: state => state.app['TYPE0126'] // 年级
    })
  },
  watch: {
    info (val) {

      this.postParams = {
        qrzhfqrz: val.qrzhfqrz,
				zszym:val.zszym,
				zsnj:val.zsnj,
				zsyxm:val.zsyxm,
        note:val.note,
        pymsm:val.pymsm,
        zszjhrs:val.zszjhrs
      }
      // for(var item in this.info){
      //   if(item == 'zsyxm' || item == 'zszym' || item == 'zsnj' || item == 'qrzhfqrz' || item == 'note' || item == 'id'){
      //     this.form.getFieldDecorator(item, {initialValue: this.info[item]})
      //   }
      // }
			this.getProfessionList(val.zsyxm)

    }
  },
  created () {
    this.initSelectMenu()
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
  },
  methods: {
   	initSelectMenu() {
			let allRequest = [
				this.$api.base.collegeAll()
			]
			Promise.all(allRequest).then(res => {
				this.selectMenu.yx = res[0].data
        this.$api.base.dictionaryData('TYPE0441').then(res => {
           this.$set(this.selectMenu,'xxlx',res.data)
        })
			})

		},
    reset () {
      this.data = [{
        column: '总计划',
        plan: '',
        key: 'zjh'
      }]
    },
    // 选择院系
    yxChange (code) {
      this.getProfessionList(code)
    },
		getProfessionList(code){
			this.$api.base.majorAll({
				lsdwh: code
			}).then(res => {
				if (res.data) {
          this.$set(this.selectMenu,'zy',res.data)
				}
			})
		},
    // 选择招生年度
    zsndChange () {

    },
    zyChange(code){
      // console.log(this.form.getFieldDecorator().zszym)
      this.selectMenu.zy.forEach(item =>{
        if(code == item.zyh){
          this.form.setFieldsValue({'pymsm':item.pymsm})
        }
      })
    },
    // 关闭
    onClose () {
      this.reset()
      this.$emit('close')
    },
    // 保存
    handleSubmit () {
      let paramms = Object.assign({
      	zsjhlxm: '02',
				id:this.info.id
      }, this.form.getFieldsValue())
      this.$api.recruitstat.disProsseionPlanUpdate(paramms).then(res => {
      	this.$emit('success')
      }).finally(() => {
      	this.loadingBtn = false
      })
    },
    // 修改各计划人数人数
    handleChange (key, dataIndex, value) {
      const dataSource = [...this.data]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.data = dataSource
      }
    }
  }
}
</script>
